<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<head th:include="include :: header"></head>
<body class="gray-bg" id="test">
<form class="layui-form" style="width: 100%;margin-top: 20px;margin-left: 10%" action="/view/video">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: auto">查询相关视频/图片</label>
        <div class="layui-input-inline">
            <input type="text" name="username" placeholder="请输入" autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit="" lay-filter="demo1">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">分页show视频</li>
<!--        <li>流加载视频</li>-->
        <li>图片</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="video_parent_content">
                <ul id="biuuu_city_list" style="width: 90%; margin-left: 5%;"></ul>
                <div id="demo20"></div>
            </div>
        </div>

<!--        <div class="layui-tab-item">-->
<!--            <div class="video_parent_content">-->
<!--                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">-->
<!--                    <legend>信息流 - 滚动加载视频</legend>-->
<!--                </fieldset>-->
<!--                <ul class="flow-default" id="LAY_demo1" style="width: 80%"></ul>-->
<!--            </div>-->
<!--        </div>-->

        <!--  图片显示区域-->
        <div class="layui-tab-item">
            <div class="video_parent_content">
                <ul id="biuuu_city_list0" style="width: 100%"></ul>
                <div id="demo200"></div>
            </div>

        </div>

    </div>
</div>


</body>
<div th:include="include :: footer"></div>
<script>
    var datasVideos = "[[${videos}]]";
    var datasVideosArray = [];
    var datasImages = "[[${images}]]";
    var datasImagesArray = [];
    //将一段数组分页展示
    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage
            , layer = layui.layer;
        //测试数据
        var datas = datasVideos;
        var datastring = datas.substring(1, datas.length - 1);
        // console.log(datastring)
        var data = datastring.split(", http://")
        if (datasVideosArray.length > 0) {
            data = datasVideosArray;
        }
        //调用分页
        laypage.render({
            elem: 'demo20'
            , count: data.length
            , jump: function (obj) {
                //模拟渲染
                document.getElementById('biuuu_city_list').innerHTML = function () {
                    var arr = []
                        , thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                    layui.each(thisData, function (index, item) {
                        item = item.trim();
                        var origin = item;
                        var name = item.substring(item.lastIndexOf("/") + 1);
                        item = item.indexOf("http//") > -1 ? item.substring(item.lastIndexOf("http//") + "http//".length) : item;
                        item = item.indexOf("http://") > -1 ? item : "http://" + item;

                        item = encodeURI(item);
                        console.log("分页视频路径地址》》》", item)
                        arr.push(' <li style="margin: 20px 10px;padding-bottom:60px; float: left;max-width: 90%" >\n' +
                            '      <div><video width="100%" height="500px" onplay="videoShow(this)" controls><source src="' + item + '" type="video/mp4">\n' +
                            '        </video> <span>' + name + '</span></div>  \n' +

                            '        <button class="layui-btn  layui-btn-normal" style="float: right;margin-top: 10px;margin-right: 40px" onclick="delFile(&quot;' + origin + '&quot;)">删除</button>' +
                            '        <button class="layui-btn  layui-btn-normal" style="margin-top: 10px" onclick="delFileAll(&quot;' + origin + '&quot;)">删除所有</button>' +
                            '    </li>');

                    });
                    return arr.join('');
                }();
            }
        });
    });


    /******** 图片*****/
    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage
            , layer = layui.layer;
        var datas = datasImages;
        var datastring = datas.substring(1, datas.length - 1);
        var data = datastring.split(", http://")
        //调用分页
        laypage.render({
            elem: 'demo200'
            , count: data.length
            , jump: function (obj) {
                //模拟渲染
                document.getElementById('biuuu_city_list0').innerHTML = function () {
                    var arr = []
                        , thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                    layui.each(thisData, function (index, item) {
                        item = item.trim();
                        var origin = item;
                        item = item.indexOf("http://") > -1 ? item : "http://" + item;
                        item = encodeURI(item);
                        arr.push(' <div style="margin-top: 30px" ><div>\n' +
                            '        <img width="80%" height="auto"  src="' + item + '" /></div><div style="width: 80%">\n' +
                            '        <button class="layui-btn  layui-btn-normal" style="float: right;margin-top: 10px;margin-right: 40px" onclick="delFile(&quot;' + origin + '&quot;)">删除其他重复文件</button>' +
                            '        <button class="layui-btn   layui-btn-normal"  onclick="delFileAll(&quot;' + origin + '&quot;)">删除所有</button>' +
                            '   </div></div>');


                    });
                    return arr.join('');

                }();
            }
        });


    });

    function delFile(filename) {
        $.ajax({
            type: "get",
            url: "/view/del",
            data: {
                "filename": filename,
                "delAll": "one"
            },
            success: function (r) {
                $.modal.msg(r);
            }
        });
    }

    function delFileAll(filename) {
        $.ajax({
            type: "get",
            url: "/view/del",
            data: {
                "filename": filename,
                "delAll": "all"
            },
            success: function (r) {
                $.modal.msg(r);
            }
        });
    }
</script>
<script>

    // layui.use('flow', function () {
    //     var flow = layui.flow;
    //     var datas = datasVideos;
    //     var datastring = datas.substring(1, datas.length - 1);
    //     var data = datastring.split(", http://")
    //     console.log("数组数据：", data);
    //     if (datasVideosArray.length > 0) {
    //         data = datasVideosArray;
    //     }
    //     flow.load({
    //         elem: '#LAY_demo1' //流加载容器
    //         , scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
    //         , done: function (page, next) { //执行下一页的回调
    //             var size = 6;
    //             var pageAll = data.length / size;
    //             //模拟数据插入
    //             setTimeout(function () {
    //                 var arr = [];
    //                 for (var i = (page - 1) * size; i < page * size; i++) {
    //                     console.log("当前第几个", i)
    //                     console.log("总页数", pageAll)
    //                     if (i >= data.length) {
    //                         break
    //                     }
    //                     var item = data[i];
    //                     item = item.trim();
    //                     item = item.indexOf("http://") > -1 ? item : "http://" + item;
    //                     //显示名称
    //                     var origin = item;
    //                     var name = item.substring(item.lastIndexOf("/") + 1);
    //                     item = encodeURI(item);
    //                     arr.push(' <li style="margin: 20px 10px;padding-bottom:60px;float: left;max-width: 90%" >\n' +
    //                         '      <div><video width="100%" height="auto" onplay="videoShow(this)" controls><source src="' + item + '" type="video/mp4">\n' +
    //                         '        </video> <span>' + name + '</span></div>  \n' +
    //                         '        <button class="layui-btn  layui-btn-normal" style="float: right;margin-top: 10px;margin-right: 40px" onclick="delFile(&quot;' + origin + '&quot;)">删除</button>' +
    //                         '        <button class="layui-btn   layui-btn-normal" style="margin-top: 10px" onclick="delFileAll(&quot;' + origin + '&quot;)">删除所有</button>' +
    //                         '    </li>');
    //                 }
    //                 //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
    //                 //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
    //                 next(arr.join(''), page < pageAll); //假设总页数为 10
    //             }, 10);
    //         }
    //     });
    // });
</script>
<script type="text/javascript">
    function videoShow(_video) {
        var vids = document.getElementsByTagName('video');

        for (var i = 0; i < vids.length; i++) {
            // debugger
            var video = vids[i]
            if (video !== _video) {
                video.pause();
            } else {
                console.log("当前视频 不要停止---------------------------------------")
            }
        }
    }

</script>


<style>
    .layui-laypage a, .layui-laypage span {
        font-size: 20px;
    }

    .video_parent_content {
        margin-left: 5%;
        margin-top: 20px;
        padding: 0;
        width: 90%
    }

    #demo20, #demo200 {
        height: auto;
        padding-left: 10%;
        width: 80%;
        background-color: #DDDDDD;
        position: fixed;
        bottom: 0;
    }
</style>
</html>
